<template>
    <DesignerContainer ref="container" :formData="formData" :formItems="formItems" @submit="onSubmit" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import DesignerContainer from './components/FormDesigner/DesignerContainer.vue'

const container = ref(null)

onMounted(() => {
    // @ts-ignore
    console.log(container.value.getDynamicForm())
})

const formData = ref({
    Input_1637029608507: '1',
})

// 提交事件
const onSubmit = () => {
    console.log(formData.value)
}

const formItems = ref([
    {
        labelWidth: 100,
        tag: 'el-input',
        type: 'Input',
        props: {
            size: 'medium',
            disabled: false,
            readonly: false,
            clearable: false,
            suffixIcon: '',
            prefixIcon: '',
            placeholder: '输入框',
        },
        label: '输入框',
        modelValue: 'Input_1637029608507',
        selectCurrent: false,
    },
])
</script>

<style>
html,
body {
    margin: 0;
    padding: 0;
}
</style>
